/* eslint-disable react/jsx-handler-names */
/* eslint-disable eqeqeq */
/** 
 * 入参
    type： 1- 指令   2-簿记  11-组合试算
    onOk：指令下达成功或簿记成功抛出事件
    onCancel：取消抛出事件

*/
import React, { PureComponent } from 'react';
import { AvailableAssetC, TradeHoldC, FirstHeaderC } from '../../../../comps';
import style from './index.less';
import AssetsInfo from './assetsInfo';
import AddOrderC from './addOrder';
import 'moment/locale/zh-cn';

export default class addAssetsOrder extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      money: {}, // 资金
      portfolio: undefined, // 当前组合
      position: {}, // 持仓数量
      tradingcode: undefined, // 当前证券代码 {exchangecode: "101", tradingcode: "510060", secuabbr: "上证中央企业50ETF"}
      startDate: undefined, // 展期开始时间
      endDate: undefined, // 展期结束时间
      portfolioCode: undefined, // 组合code
    };
  }

  // 组合变更id 切换
  portfolioOnChange = (e) => {
    if (this.state.portfolio !== e) {
      // 组合id不同则变更当前页面组合id
      this.setState({
        portfolio: e,
      });
    }
  };

  // 证券代码变更
  tradingOnChange = (e) => {
    if (this.state.tradingcode !== e) {
      // 证券代码不同则变更当前页面证券代码
      this.setState({
        tradingcode: e,
      });
    }
  };

  // 新建指令和簿记成功之后调用
  onOk = () => {
    const { type } = this.props;
    if (type == 2 || type == 11) {
      // 簿记页面 组合试算
      this.props && this.props.onOk && this.props.onOk();
    }
  };

  // 点击取消按钮
  onCancel = () => {
    const { type } = this.props;
    if (type == 2 || type == 11) {
      // 簿记页面
      this.props.onCancel();
    }
  };

  // 获取组合code
  onChangePortfolioCode = (val) => {
    this.setState({
      portfolioCode: val, // 组合代码
    });
  };

  // 更新时间戳 用于更新资金可用或持仓可用
  handleChangeTimeStamp = (type) => {
    // eslint-disable-next-line no-undef
    this.setState({ [type]: new Date().getTime() });
  };

  render() {
    const { portfolio, tradingcode, startDate, endDate, portfolioCode, timeStamp1, timeStamp2 } = this.state;
    const { type } = this.props;
    return (
      <div className={style.AddHKStock}>
        <div>
          <AssetsInfo
            tradingId={tradingcode && tradingcode.secucode ? tradingcode.secucode : undefined}
            onChange={(info) => {
              this.setState({
                startDate: info?.startDate,
                endDate: info?.endDate,
              });
            }}
          />
        </div>
        <div>
          <div style={{ marginBottom: '16px' }}>
            <AvailableAssetC
              timeStamp={timeStamp1}
              queryModel={'new'}
              portfolio={portfolioCode}
              onChange={(e) => {
                // 获取t0和t1
                this.setState({
                  money: e,
                });
              }}
            />
          </div>
          <div style={{ marginBottom: '16px' }}>
            <TradeHoldC
              timeStamp={timeStamp2}
              queryModel={'new'}
              securityType={'20'} // 资产管理计划
              portfolio={portfolioCode}
              tradingcode={tradingcode && tradingcode.tradingCode ? tradingcode.tradingCode : undefined}
              exchangecode={tradingcode && tradingcode.exchangeCode ? tradingcode.exchangeCode : undefined}
              onChange={(e) => {
                // 获取hold和available
                this.setState({
                  position: { ...e },
                });
              }}
            />
          </div>
          <FirstHeaderC title={'交易要素'} />
          <AddOrderC
            type={this.props.type}
            info={undefined}
            portfolioOnChange={this.portfolioOnChange}
            onChangePortfolioCode={this.onChangePortfolioCode}
            tradingOnChange={this.tradingOnChange}
            changeTimeStamp={this.handleChangeTimeStamp}
            onRef={(ref) => {
              this.addOrder = ref;
            }}
            onOk={this.onOk}
            onCancel={this.onCancel}
            money={this.state.money}
            position={this.state.position}
            endDate={endDate}
            startDate={startDate}
          />
        </div>
      </div>
    );
  }
}
